<template>
  <div class="content">
    <van-action-sheet v-model="show" title="">
      <div class="prod-info">
        <van-image
          width="80"
          height="80"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <span>Sunlike</span>
        <van-icon name="cross" size="24" class="prod-close" />
      </div>
      <van-form @submit="onSubmit">
        <van-field name="years" label="服务期限" input-align="right">
          <template #input>
            <van-stepper v-model="dataFrom.years" />
          </template>
        </van-field>
        <van-field name="users" label="用户数" input-align="right">
          <template #input>
            <van-stepper v-model="dataFrom.users" />
          </template>
        </van-field>
        <van-field name="version" label="版本" input-align="right"> </van-field>
        <van-row  style="padding: 0 16px">
          <van-col v-for="item in versionList" :key="item.id">
            <div
              class="select-item"
              :class="
                activeVersionList.includes(item.id) ? 'select-item-acitve' : ''
              "
              @click="versionItemClick(item.id)"
            >
              {{ item.label }}
            </div>
          </van-col>
        </van-row>
        <van-field name="appreciation" label="增值模块" input-align="right">
        </van-field>
        <van-row  style="padding: 0 16px">
          <van-col v-for="item in appreciationList" :key="item.id">
            <div
              class="select-item"
              :class="
                activeAppreciationList.includes(item.id)
                  ? 'select-item-acitve'
                  : ''
              "
              @click="appreciationItemClick(item.id)"
            >
              {{ item.label }}
            </div>
          </van-col>
        </van-row>
        <van-field
          name="remark"
          v-model="dataFrom.remark"
          rows="2"
          autosize
          label="备注说明"
          type="textarea"
          placeholder="备注说明"
        />
        <div style="margin: 16px">
          <van-button round block type="info" native-type="submit">
            加入订单
          </van-button>
        </div>
      </van-form>
    </van-action-sheet>
  </div>
</template>

<script>
export default {
  data () {
    return {
      show: false,
      dataFrom: {
        years: 0,
        users: 0
      },
      versionType: 2,
      versionList: [
        {
          id: '1',
          label: '制程管理'
        },
        {
          id: '2',
          label: '进销存'
        },
        {
          id: '3',
          label: 'V23'
        }
      ],
      appreciationList: [
        {
          id: '1',
          label: 'MBP计划生产'
        },
        {
          id: '2',
          label: 'MBP报表'
        },
        {
          id: '3',
          label: 'MBP报表'
        },
        {
          id: '4',
          label: 'MBP报表'
        },
        {
          id: '5',
          label: 'MBP报表'
        },
        {
          id: '6',
          label: 'MBP报表'
        }
      ],
      activeVersionList: [],
      activeAppreciationList: []
    }
  },
  computed: {},
  methods: {
    init (id) {
      console.log('id', id)
      this.show = true
    },
    versionItemClick (id) {
      if (this.versionType === 1) {
        // 多选
        if (this.activeVersionList.includes(id)) {
          console.log(111)
          this.activeVersionList = this.activeVersionList.filter((item) => {
            return item !== id
          })
        } else {
          this.activeVersionList.push(id)
        }
      } else {
        // 单选
        this.activeVersionList = [id]
      }
    },
    appreciationItemClick (id) {
      // 多选
      if (this.activeAppreciationList.includes(id)) {
        console.log(111)
        this.activeAppreciationList = this.activeAppreciationList.filter(
          (item) => {
            return item !== id
          }
        )
      } else {
        this.activeAppreciationList.push(id)
      }
    },
    onSubmit () {}
  }
}
</script>

<style lang="less" scoped>
.prod-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  padding-top: 26px;
  position: relative;
  span {
    color: rgba(16, 16, 16, 1);
    font-size: 14px;
    flex: 1;
    text-align: left;
    padding-left: 21px;
  }
  .prod-close {
    position: absolute;
    right: 16px;
    top: 26px;
  }
}
.van-cell::after {
  border-bottom: 0px solid white;
}
.select-item {
  padding: 0 12px;
  height: 30px;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 1);
  color: rgba(102, 102, 102, 1);
  font-size: 14px;
  text-align: center;
  font-family: -apple-system;
  border: 1px solid rgba(187, 187, 187, 1);
  line-height: 30px;
  margin: 0 12px 12px 0;
}
.select-item-acitve {
  color: rgba(255, 94, 94, 1);
  border: 1px solid rgba(255, 94, 94, 1);
}
</style>